<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addTask="addTask" :list='list'  @change='changelastfn' ></TodoHeader>
    <TodoMain :list="showlist" @del="delFn" @change="changeFn"></TodoMain>
    <TodoFooter 
    :list="list" @clear="clearFn" :type='type'
    @changeType="changetypeFn"></TodoFooter>
  </section>
</template> 

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'

import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      //1:列表的渲染
      list:JSON.parse(localStorage.getItem('todolist')) || [],
      type: 'all', //
    }
  },
  methods: {
     // 1.9-父组件通过回调函数接受子组件传过来的参数
    delFn(id) {
      // console.log('触发了delfn');
      // 把id过滤掉
      this.list = this.list.filter((item) => item.id !== id)
    },
    //2.1-2 父组件修改任务状态。
    changeFn(id) {
      console.log(id)
      const res = this.list.find((item) => item.id == id)
      res.isDone = !res.isDone
    },

    //子组件传过来的添加的信息。添加到对象list里面。
    // 2.2.4 父组件添加任务，组件接受task，并且添加
    addTask(task) {
      //2.2.5追加到任务
      this.list.push({
        id: this.list.length ? this.list.at(-1).id + 1 : 100,
        name: task,
        isDone: false,
      })
    },

    //清除已完成。
    clearFn() {
      // console.log('clearFn')
      this.list = this.list.filter((item) => !item.isDone)
    },

    //接收参数
    changetypeFn(type){
      this.type=type
    },

    changelastfn(val){
      console.log('val');
      this.list.forEach(item=>item.isDone=val)
    }
  },

  computed: {
    showlist() {
      if (this.type === 'yes') {
        return this.list.filter((item) => item.isDone)
      } else if (this.type === 'no') {
        return this.list.filter((item) => !item.isDone)
      } else {
        return this.list
      }
    },
  },
    //属性监听：深度监听lis。如果内容改变。立即执行下面的函数。
  watch:{
    list:{
      deep:true,
      handler(newVal){
        // 存储本地
        localStorage.setItem('todolist',JSON.stringify(newVal))
      }
    }
  }
}
</script>
